﻿<%@ Page Title="" Language="C#" MasterPageFile="~/master/Attendance.master" AutoEventWireup="true" CodeFile="AngelMgmt.aspx.cs" Inherits="LDAP.Web.View.Attendance.AngelMgmt" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link rel="stylesheet" href="<%= StaticDomain %>/scripts/util/ui.uapselector/skin/default/main.css?r=<%= R %>" />
    <link rel="stylesheet" href="<%= StaticDomain %>/scripts/util/ui_card/ui_card.css?r=<%= R %>" />
    <link rel="stylesheet" href="<%= StaticDomain %>/scripts/util/JqModal/JqPopU.css?r=<%= R %>" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <style type="text/css">
        #selectable .ui-selecting { background: #FECA40; }
        #selectable .ui-selected { background: #F39814; color: white; }
        #selectable { list-style-type: none; margin: 0; padding: 0; }
        #selectable li { margin: 3px; padding: 0.4em; font-size: 1.2em; }
    </style>

    <script type="text/javascript" src="<%= StaticDomain %>/scripts/util/ui.uapselector/jquery.ui.uapselector.js?r=<%= R %>"></script>
    <script type="text/javascript" src="<%= StaticDomain %>/scripts/util/ui_card/FixImgSize.js"></script>
    <script type="text/javascript" src="<%= StaticDomain %>/scripts/util/template/trimpath-template.js"></script>
    <script type="text/javascript" src="<%= StaticDomain %>/scripts/util/JqModal/JqPopU.js?r=<%= R %>"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div>
      <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">添加天使</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
          <div class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <span id="angel"></span>
            </div>
            <button class="btn btn-default btn-info" type="button" id="add">确定</button>
          </div>
        </div>
      </nav>
    </div>
    
    <div class="alert alert-success" style="display:none">更新成功^_^</div>
    <div class="alert alert-danger" style="display:none"></div>
    <div id="userList">喏，天使正飞过来，再等下下..</div>

    <textarea name="angelItem" id="angelItem" style="display:none;">
        {for l in list}
        <div id='ui_card_@{l.Id}' class='ui_card'>
            <div class='ui_card_photo'><img height='106' width='106' onload='DownImage(this,106,106,1,1)' alt='' src="<%= StaticDomain %>/scripts/util/ui_card/images/default.png" /></div>
            <div class='ui_card_info'>
                <div class='ui_card_name'><span class='ui_card_nm'>@{l.UserName}</span><span class='ui_card_id'>@{l.Id}</span></div>
                <div class='ui_card_content'>@{page.showDept(l.Id)}</div>
                <%--<div class='ui_card_91u'>91U</div>
                <div class='ui_card_km'>KM</div>--%>
                <div class="ui_card_control" style="display:none;" title="设置服务部门" onclick="page.setDept('@{l.Id}','@{l.Dept}')"></div>
            </div>
            <div class="ui_card_close" onclick="page.remove('@{l.Id}')" title="移除">×</div>
        </div>
        {forelse}
        <div>
            <div class="alert alert-info">暂无天使，赶紧添加，赶紧的！</div>
        </div>
        {/for}
    </textarea>

    <script type="text/javascript">
        $(document).ready(function(){
            page.userControl = new CYUAP.Selector({ divID: "angel", typeID: 1, totalSelectNum: 10,  showMoreBtn:true, width: Math.min( document.documentElement.clientWidth * 0.83 -300, 500), searchData: page.allUser });
            page.initAngelList();

            $("#add").click(page.addAngel);
        });

        var page = {
            handler:"/handler/attendanceMgmt.ashx?action=",

            initAngelList: function(){
                $.getJSON("/handler/attendanceControl.ashx?action=getAngels", {r:Math.random()}, function(data){
                    $("#userList").html(TrimPath.processDOMTemplate("angelItem", {list: data}));
                    $(".ui_card").hover( function(){$(this).find(".ui_card_control").show();} , function(){$(this).find(".ui_card_control").hide();});
                });
            },

            showDept: function(id){
                for(var i=0;i<page.allUser.length;i++){
                    if(page.allUser[i].id==id.toLowerCase()){
                        return page.allUser[i].deptname;// page.allUser[i].deptname.indexOf(';')>-1 ?page.allUser[i].deptname.substring(0, page.allUser[i].deptname.indexOf(';')):page.allUser[i].deptname;
                    }
                }
            },

            addAngel: function(){
                var list = page.userControl.getValue();
                if(list.length == 0){
                    $(".alert").hide();
                    $(".alert-danger").html("乖，别闹了，赶紧先选个人").show();
                    return false;
                }

                var codes =[];                
                $.each(list, function(i,q){
                    codes.push(q.id);    
                });

                $.post(page.handler+"addAngels", {codes: codes.join(',')}, function(data){
                    if(data&&data.code==1){
                        page.userControl.setValue([]);
                        var addArray = [];
                        $.each(list, function(i,q){
                            if($("#ui_card_"+q.id).length==0){
                                addArray.push({Id: q.id, UserName: q.name.replace(/\(cy[\S^)]+\)/g,'')});
                            }
                        });
                        $("#userList").append(TrimPath.processDOMTemplate("angelItem", {list: addArray}));
                        $(".ui_card").hover( function(){$(this).find(".ui_card_control").show();} , function(){$(this).find(".ui_card_control").hide();});
                    }
                    else{

                    }
                },"json");
            },

            remove: function(id){
                if(confirm("删除天使的同时会删除TA的服务部门设置，你确定删除【"+page.getName(id)+"】么？")){
                    $.post(page.handler+"delAngel", {id: id}, function(data){
                        $("#ui_card_"+id).hide('slow');
                    },"json");
                }
            },

            getName: function(id){
                return $("#ui_card_"+id +" .ui_card_nm").html();
            },

            setDept: function(id, dept){
                var html = [];
                html.push('<ol id="selectable">');
                $.each(page.allDept, function(i,q){
                    html.push('<li class="ui-widget-content '+(dept.indexOf(","+ q+",")>-1?"ui-selected":"")+'">'+ q+'</li>');
                });
                html.push('</ol>');

                page.popU = page.popU || new PopU();
                page.popU.initPop({
                    type: 'string',
                    title: page.getName(id) + "("+ id + ")——服务部门设置",
                    contents: html.join(""),
                    w: 750,
                    h: document.documentElement.clientHeight - 220,
                    y: $(window).scrollTop() + 60,
                    onYesFn: function(){ page.setDepartment(id);},
                    onNoFn: function () { },
                    tip:"按住Ctrl可多选，或者你试试看有没其他方式？"
                });
                page.popU.showPop();

                $( "#selectable" ).selectable();
            },

            setDepartment: function(id){
                window.clearTimeout(page.timeOuter);
                page.timeOuter=null;
                var html = [];
                $.each($("#selectable .ui-selected"), function(i,q){
                    html.push($(q).html());
                });

                $.post(page.handler+"updateAngelServiceDept", {id: id, dept: html.join(',')}, function(data){
                    if(data && data.code == 1){
                        page.timeOuter=window.setTimeout(function(){
                            $(".ft .tip").html("更新成功，1秒后自动关闭。&nbsp;")
                            page.timeOuter=window.setTimeout(function(){
                                if(page.popU)
                                    page.popU.close();
                            },1000);
                        },1000);
                        $(".ft .tip").html("更新成功，2秒后自动关闭。&nbsp;").css({color:"red"});
                    }
                },"json");
            }
        };

        page.allUser = <%= ToJson(All).ToLower() %>;
        page.allDept = <%= ToJson(DeptList)%>;
    </script>
</asp:Content>

